<template>
  <div>
    <div class="mainBody">
      <img :src="data.pic" alt />
      <div class="msg">
        <p>{{data.title}}</p>
        <p>
          <span>评分：</span>
          <span>{{data.rating}}</span>
        </p>
        <p>
          <span>标签：</span>
          <span>{{data.slogo}}</span>
        </p>
        <p>
          <span v-for="item in data.labels" :key="item[0]">{{item}} | </span>
        </p>
      </div>
      <van-button plain type="primary">购票</van-button>
    </div>
  </div>
</template>

<script>
export default {
  props: {
    data: Object
  },
  mounted() {
    // console.log(this.data);
  }
};
</script>

<style scoped>
.mainBody {
    position: relative;
  /* width: 400px; */
  padding: 20px;
  display: flex;
  align-items: center;
  flex: 1 auto 1;
}
.msg {
  padding: 0 10px;
}
.msg > p {
  display: flex;
  overflow: hidden;
  text-overflow: ellipsis;
  display: -webkit-box;
  -webkit-line-clamp: 1;
  -webkit-box-orient: vertical;
}
img {
  width: 66px;
  height: 100px;
}
.van-button {
   margin-left: auto;
  width: 50px;
  height: 25px;
  white-space: nowrap;
}
</style>